import React, { useEffect } from 'react'
import useGetTableData from '@/hooks/useGetTableDataV2'
import { useForm } from 'antd/es/form/Form'
import PageContainer from '@/components/PageContainer'
import { useIndexColumns } from './TableColumns'
import { SysAnnouncementVO as ITableData } from './types'
import CustomTable from '@/components/QsfCustomTable'
import './index.less'
import { getListSysAnnouncement, saveSysAnnouncement } from '@/api/system'
import { Button, message, Modal, Space } from 'antd'
import useModal from '@/hooks/useModal'
import EditFormVertical from '@/components/QsfCustomForm/EditFormVertical'
const Index: React.FC<{ sentry?: boolean }> = () => {
  const [form] = useForm()
  const { tableProps, params, search, reset, reload } = useGetTableData<ITableData>(getListSysAnnouncement, {
    form: form,
    immediatelySend: true,
  })
  useEffect(() => {}, [])
  const createModal = useModal({
    onSuccess: () => {
      message.success('操作成功')
    },
    onReload: () => {
      reload()
    },
  })
  const onEdit = (info: ITableData) => {
    createModal.openModal(info)
    createModal.form.setFieldsValue({
      ...info,
      beginTime: [info?.beginTime, info?.endTime],
    })
  }
  return (
    <PageContainer className="system_notice_wrap">
      <div className="table_extra_flex_wrapbox" style={{ padding: '0 0 12px 12px' }}>
        <div className="table_extra_flex">
          <Button type="primary" onClick={() => createModal.openModal()}>
            新建公告
          </Button>
        </div>
      </div>
      <CustomTable
        isAutoScrollY
        {...tableProps}
        columns={useIndexColumns({ onEdit })}
        rowKey={(rows) => rows?.id}
      ></CustomTable>
      <Modal
        width={600}
        title="新建公告"
        open={createModal.open}
        maskClosable
        onCancel={createModal.closeModal}
        footer={
          <div className="flex_end">
            <Space>
              <Button onClick={createModal.closeModal}>取消</Button>
              <Button
                type="primary"
                loading={createModal.confirmLoading}
                onClick={() =>
                  createModal.handleSubmit((vals) => {
                    return saveSysAnnouncement({
                      ...vals,
                      endTime: vals?.beginTime[1],
                      beginTime: vals?.beginTime[0],
                      id: createModal.currentRecord?.id,
                    })
                  })
                }
              >
                确定
              </Button>
            </Space>
          </div>
        }
      >
        <EditFormVertical
          className="system_notice_wrap_edit_modal"
          editConfig={[
            {
              label: '请选择时间范围',
              name: 'beginTime',
              type: 'FixedRangePicker',
              config: {
                showTime: true,
                customFormat: 'YYYY-MM-DD HH:mm:ss',
              },
              rules: [
                {
                  required: true,
                  message: '请选择时间范围',
                },
              ],
            },
            {
              name: 'mainContent',
              label: '公告内容',
              type: 'TextArea',
              rules: [
                {
                  required: true,
                  message: '请输入公告内容',
                },
              ],
              config: {
                showCount: true,
                maxLength: 200,
                rows: 4,
              },
            },
          ]}
          form={createModal.form}
        />
      </Modal>
    </PageContainer>
  )
}

export default Index
